<template>
  <div class="comments-card-wrapper">
    <div class="comments-title">
      <div class="comments-title-left">
        <span>
          <image-view
            :src="item.userInfo.avatar"
            width="30px"
            height="30px"
            :round="true"
          ></image-view>
        </span>
        <span>
          {{ item.userInfo.nickname }}
          状态:{{ item.status }}
        </span>
      </div>
      <div class="comments-title-right">
        <span>我的点评</span>
      </div>
    </div>
    <div class="comments-content">{{ item.value }}</div>
    <div class="comments-footer">
      <span @click="handleToggleClick(item)">
        <template v-if="item.like">
          喜欢
          <van-icon name="like-o" />
        </template>
        <template v-else>
          不喜欢
          <van-icon name="like-o" />
        </template>
      </span>
      <span><van-icon name="comment-o" /></span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'comments-card',
  props: ['item'],
  computed: {
    ...mapState(['userInfo']),
  },
  methods: {
    handleToggleClick(item) {
      item.like = !item.like
    },
  },
}
</script>

<style lang="scss" scoped>
.comments-card-wrapper {
  width: 7rem;
  margin: 5px auto;
  padding: 10px;
  background: #eee;
  border-radius: 5px;
  .comments-title {
    display: flex;
    .comments-title-left {
      flex: 1.3;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 5px;
      font-size: 14px;
    }
    .comments-title-right {
      flex: 0.7;
      display: flex;
      padding-right: 20px;
      justify-content: flex-end;
      align-items: center;
      span {
        padding: 2px 5px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12px;
        background: #ccc;
      }
    }
  }
  .comments-content {
    padding: 10px 0px;
  }
  .comments-footer {
    padding: 10px 10px 5px 10px;
    border-top: 1px solid #ccc;
    display: flex;
    span {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
    }
  }
}
</style>
